
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Browser History Utility: Simple Navigation Bar</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">

<!--there is no custom header content for this example-->

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-debug.js"></script>

</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Browser History Utility: Simple Navigation Bar</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>Browser History Utility: Simple Navigation Bar</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	<p>This example demonstrates how to use the Browser History Utility to "ajaxify" a simple navigation bar.</p>	</div>	

	<div class="module example-container  newWindow">
			<div id="example-canvas" class="bd">

		<p class="newWindowButton yui-skin-sam">
        <span id="newWindowLink">
            <span class="first-child">
                <a href="history-navbar_source.html" target="_blank">View example in new window.</a>
            </span>
        </span>	
    </p>
	
		
		</div>
	</div>			
	</div>
		
	<h3 class="first">Basic markup</h3>

<div id="syntax-3680c97e4ef90f902f00fa09f070517f" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc1">&amp;lt;</span>!doctype html<span class="sc1">&amp;gt;</span></div></li><li class="li1"><div class="de1"><span class="sc1">&amp;lt;</span>html<span class="sc1">&amp;gt;</span></div></li><li class="li1"><div class="de1">  <span class="sc1">&amp;lt;</span>head<span class="sc1">&amp;gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc1">&amp;lt;</span>title<span class="sc1">&amp;gt;</span>YUI Browser History Utility - Simple Navigation Bar Example<span class="sc1">&amp;lt;</span>/title<span class="sc1">&amp;gt;</span></div></li><li class="li2"><div class="de2">  <span class="sc1">&amp;lt;</span>/head<span class="sc1">&amp;gt;</span></div></li><li class="li1"><div class="de1">  <span class="sc1">&amp;lt;</span>body<span class="sc1">&amp;gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc1">&amp;lt;</span>div id=&quot;doc&quot;<span class="sc1">&amp;gt;</span></div></li><li class="li1"><div class="de1">      <span class="sc1">&amp;lt;</span>div id=&quot;hd&quot;<span class="sc1">&amp;gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc1">&amp;lt;</span>h3<span class="sc1">&amp;gt;</span>Navigation Links<span class="sc1">&amp;lt;</span>/h3<span class="sc1">&amp;gt;</span></div></li><li class="li2"><div class="de2">        <span class="sc1">&amp;lt;</span>div id=&quot;nav&quot;<span class="sc1">&amp;gt;</span></div></li><li class="li1"><div class="de1">          <span class="sc1">&amp;lt;</span>ul<span class="sc1">&amp;gt;</span></div></li><li class="li1"><div class="de1">            <span class="sc1">&amp;lt;</span>li<span class="sc1">&amp;gt;&amp;lt;</span>a href=&quot;?section=home&quot;<span class="sc1">&amp;gt;</span>Home<span class="sc1">&amp;lt;</span>/a<span class="sc1">&amp;gt;&amp;lt;</span>/li<span class="sc1">&amp;gt;</span></div></li><li class="li1"><div class="de1">            <span class="sc1">&amp;lt;</span>li<span class="sc1">&amp;gt;&amp;lt;</span>a href=&quot;?section=overview&quot;<span class="sc1">&amp;gt;</span>Overview<span class="sc1">&amp;lt;</span>/a<span class="sc1">&amp;gt;&amp;lt;</span>/li<span class="sc1">&amp;gt;</span></div></li><li class="li1"><div class="de1">            <span class="sc1">&amp;lt;</span>li<span class="sc1">&amp;gt;&amp;lt;</span>a href=&quot;?section=products&quot;<span class="sc1">&amp;gt;</span>Products<span class="sc1">&amp;lt;</span>/a<span class="sc1">&amp;gt;&amp;lt;</span>/li<span class="sc1">&amp;gt;</span></div></li><li class="li2"><div class="de2">            <span class="sc1">&amp;lt;</span>li<span class="sc1">&amp;gt;&amp;lt;</span>a href=&quot;?section=contactus&quot;<span class="sc1">&amp;gt;</span>Contact Us<span class="sc1">&amp;lt;</span>/a<span class="sc1">&amp;gt;&amp;lt;</span>/li<span class="sc1">&amp;gt;</span></div></li><li class="li1"><div class="de1">          <span class="sc1">&amp;lt;</span>/ul<span class="sc1">&amp;gt;</span></div></li><li class="li1"><div class="de1">        <span class="sc1">&amp;lt;</span>/div<span class="sc1">&amp;gt;</span></div></li><li class="li1"><div class="de1">      <span class="sc1">&amp;lt;</span>/div<span class="sc1">&amp;gt;</span></div></li><li class="li1"><div class="de1">      <span class="sc1">&amp;lt;</span>div id=&quot;bd&quot;<span class="sc1">&amp;gt;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="sc1">&amp;lt;</span>?</div></li><li class="li1"><div class="de1">$section = &quot;home&quot;;</div></li><li class="li1"><div class="de1">$sections = array(&quot;home&quot;, &quot;overview&quot;, &quot;products&quot;, &quot;contactus&quot;);</div></li><li class="li1"><div class="de1">if (isset($_GET[&quot;section&quot;]) <span class="sc1">&amp;&amp; in_array($_GET[&quot;section&quot;], $sections)) {</span></div></li><li class="li2"><div class="de2"><span class="sc1">   $section = $_GET[&quot;section&quot;];</span></div></li><li class="li1"><div class="de1">}</div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">include($section . &quot;.php&quot;);</div></li><li class="li1"><div class="de1">?<span class="sc1">&amp;gt;</span></div></li><li class="li2"><div class="de2">      <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1">      <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;ft&quot;</span>&gt;</span>YUI Browser History Utility - Simple Navigation Bar Example<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></li><li class="li1"><div class="de1">  <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">body</span>&gt;</span></div></li><li class="li1"><div class="de1"><span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">html</span>&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc1">&amp;lt;</span>!doctype html<span class="sc1">&amp;gt;</span>
<span class="sc1">&amp;lt;</span>html<span class="sc1">&amp;gt;</span>
  <span class="sc1">&amp;lt;</span>head<span class="sc1">&amp;gt;</span>
    <span class="sc1">&amp;lt;</span>title<span class="sc1">&amp;gt;</span>YUI Browser History Utility - Simple Navigation Bar Example<span class="sc1">&amp;lt;</span>/title<span class="sc1">&amp;gt;</span>
  <span class="sc1">&amp;lt;</span>/head<span class="sc1">&amp;gt;</span>
  <span class="sc1">&amp;lt;</span>body<span class="sc1">&amp;gt;</span>
    <span class="sc1">&amp;lt;</span>div id=&quot;doc&quot;<span class="sc1">&amp;gt;</span>
      <span class="sc1">&amp;lt;</span>div id=&quot;hd&quot;<span class="sc1">&amp;gt;</span>
        <span class="sc1">&amp;lt;</span>h3<span class="sc1">&amp;gt;</span>Navigation Links<span class="sc1">&amp;lt;</span>/h3<span class="sc1">&amp;gt;</span>
        <span class="sc1">&amp;lt;</span>div id=&quot;nav&quot;<span class="sc1">&amp;gt;</span>
          <span class="sc1">&amp;lt;</span>ul<span class="sc1">&amp;gt;</span>
            <span class="sc1">&amp;lt;</span>li<span class="sc1">&amp;gt;&amp;lt;</span>a href=&quot;?section=home&quot;<span class="sc1">&amp;gt;</span>Home<span class="sc1">&amp;lt;</span>/a<span class="sc1">&amp;gt;&amp;lt;</span>/li<span class="sc1">&amp;gt;</span>
            <span class="sc1">&amp;lt;</span>li<span class="sc1">&amp;gt;&amp;lt;</span>a href=&quot;?section=overview&quot;<span class="sc1">&amp;gt;</span>Overview<span class="sc1">&amp;lt;</span>/a<span class="sc1">&amp;gt;&amp;lt;</span>/li<span class="sc1">&amp;gt;</span>
            <span class="sc1">&amp;lt;</span>li<span class="sc1">&amp;gt;&amp;lt;</span>a href=&quot;?section=products&quot;<span class="sc1">&amp;gt;</span>Products<span class="sc1">&amp;lt;</span>/a<span class="sc1">&amp;gt;&amp;lt;</span>/li<span class="sc1">&amp;gt;</span>
            <span class="sc1">&amp;lt;</span>li<span class="sc1">&amp;gt;&amp;lt;</span>a href=&quot;?section=contactus&quot;<span class="sc1">&amp;gt;</span>Contact Us<span class="sc1">&amp;lt;</span>/a<span class="sc1">&amp;gt;&amp;lt;</span>/li<span class="sc1">&amp;gt;</span>
          <span class="sc1">&amp;lt;</span>/ul<span class="sc1">&amp;gt;</span>
        <span class="sc1">&amp;lt;</span>/div<span class="sc1">&amp;gt;</span>
      <span class="sc1">&amp;lt;</span>/div<span class="sc1">&amp;gt;</span>
      <span class="sc1">&amp;lt;</span>div id=&quot;bd&quot;<span class="sc1">&amp;gt;</span>
&nbsp;
<span class="sc1">&amp;lt;</span>?
$section = &quot;home&quot;;
$sections = array(&quot;home&quot;, &quot;overview&quot;, &quot;products&quot;, &quot;contactus&quot;);
if (isset($_GET[&quot;section&quot;]) <span class="sc1">&amp;&amp; in_array($_GET[&quot;section&quot;], $sections)) {</span>
<span class="sc1">   $section = $_GET[&quot;section&quot;];</span>
}
&nbsp;
include($section . &quot;.php&quot;);
?<span class="sc1">&amp;gt;</span>
      <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
      <span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;ft&quot;</span>&gt;</span>YUI Browser History Utility - Simple Navigation Bar Example<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
    <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span>
  <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">body</span>&gt;</span>
<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">html</span>&gt;</span></pre></div><textarea id="syntax-3680c97e4ef90f902f00fa09f070517f-plain">&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;YUI Browser History Utility - Simple Navigation Bar Example&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="doc"&gt;
      &lt;div id="hd"&gt;
        &lt;h3&gt;Navigation Links&lt;/h3&gt;
        &lt;div id="nav"&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="?section=home"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="?section=overview"&gt;Overview&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="?section=products"&gt;Products&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="?section=contactus"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="bd"&gt;

&lt;?
$section = "home";
$sections = array("home", "overview", "products", "contactus");
if (isset($_GET["section"]) && in_array($_GET["section"], $sections)) {
   $section = $_GET["section"];
}

include($section . ".php");
?&gt;
      </div>
      <div id="ft">YUI Browser History Utility - Simple Navigation Bar Example</div>
    </div>
  </body>
</html></textarea></div>
<p>
  The small portion of PHP code is responsible for including the content specified by the "section" parameter in the URL.
  This technique avoids having to rewrite common parts of a web site such as the header and footer.
</p>

<p>
  This page is already fully functional. However, clicking on the links in the navigation bar will refresh the entire
  page, including portions that are common to all the sections. This is highly inefficient (especially for a large web
  site), and using AJAX will allow us to optimize this. The idea is to use client-side scripting to intercept the click
  event, cancel it, and use the YUI <code>io</code> module to asynchronously load the content of the section, which we can
  then write to the document using innerHTML. The only downside of this approach is that it breaks the back/forward
  buttons, and individual sections cannot be bookmarked anymore. The Browser History Utility will help us work around
  this issue.
</p>

<h3>Add the necessary markup</h3>

<div id="syntax-c92c1bed0be590aec6e1f3a21780dbe0" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sy0">&amp;</span>lt<span class="sy0">;</span>iframe id<span class="sy0">=</span><span class="st0">&quot;yui-history-iframe&quot;</span> src<span class="sy0">=</span><span class="st0">&quot;assets/blank.html&quot;</span><span class="sy0">&amp;</span>gt<span class="sy0">;&amp;</span>lt<span class="sy0">;/</span>iframe<span class="sy0">&amp;</span>gt<span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="sy0">&amp;</span>lt<span class="sy0">;</span>input id<span class="sy0">=</span><span class="st0">&quot;yui-history-field&quot;</span> type<span class="sy0">=</span><span class="st0">&quot;hidden&quot;</span><span class="sy0">&amp;</span>gt<span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="sy0">&amp;</span>lt<span class="sy0">;</span>iframe id<span class="sy0">=</span><span class="st0">&quot;yui-history-iframe&quot;</span> src<span class="sy0">=</span><span class="st0">&quot;assets/blank.html&quot;</span><span class="sy0">&amp;</span>gt<span class="sy0">;&amp;</span>lt<span class="sy0">;/</span>iframe<span class="sy0">&amp;</span>gt<span class="sy0">;</span>
<span class="sy0">&amp;</span>lt<span class="sy0">;</span>input id<span class="sy0">=</span><span class="st0">&quot;yui-history-field&quot;</span> type<span class="sy0">=</span><span class="st0">&quot;hidden&quot;</span><span class="sy0">&amp;</span>gt<span class="sy0">;</span></pre></div><textarea id="syntax-c92c1bed0be590aec6e1f3a21780dbe0-plain">&lt;iframe id="yui-history-iframe" src="assets/blank.html"&gt;&lt;/iframe&gt;
&lt;input id="yui-history-field" type="hidden"&gt;</textarea></div>
<p>
  This markup should be inserted right after the opening <code>&lt;body&gt;</code> tag.
</p>

<h3>Set up the YUI Instance</h3>

<p>Now, we need to create our YUI instance and tell it to load the <code>io</code> and <code>history</code> modules:</p>
<div id="syntax-e3b4c62260da45dc6c788f1d40b94b84" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'io'</span><span class="sy0">,</span> <span class="st0">'querystring'</span><span class="sy0">,</span> <span class="st0">'history'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'io'</span><span class="sy0">,</span> <span class="st0">'querystring'</span><span class="sy0">,</span> <span class="st0">'history'</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-e3b4c62260da45dc6c788f1d40b94b84-plain">YUI().use('io', 'querystring', 'history');</textarea></div>
<h3>Write the code necessary to load a section of the web site</h3>

<p>
  Use the YUI <code>io</code> module to achieve this:
</p>

<div id="syntax-28a8463b7bafce2e8dac7d46d1e85c7e" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">function</span> loadSection<span class="br0">&#40;</span>section<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> url <span class="sy0">=</span> section <span class="sy0">+</span> <span class="st0">'.php'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        cfg <span class="sy0">=</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">            on<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                success<span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">&#40;</span>id<span class="sy0">,</span> o<span class="sy0">,</span> args<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#bd'</span><span class="br0">&#41;</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> o.<span class="me1">responseText</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">                failure<span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">&#40;</span>id<span class="sy0">,</span> o<span class="sy0">,</span> args<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                    <span class="co1">// Fallback...</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">            <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">    Y.<span class="me1">io</span><span class="br0">&#40;</span>url<span class="sy0">,</span> cfg<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">function</span> loadSection<span class="br0">&#40;</span>section<span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
    <span class="kw2">var</span> url <span class="sy0">=</span> section <span class="sy0">+</span> <span class="st0">'.php'</span><span class="sy0">,</span>
        cfg <span class="sy0">=</span> <span class="br0">&#123;</span>
            on<span class="sy0">:</span> <span class="br0">&#123;</span>
                success<span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">&#40;</span>id<span class="sy0">,</span> o<span class="sy0">,</span> args<span class="br0">&#41;</span> <span class="br0">&#123;</span>
                    Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#bd'</span><span class="br0">&#41;</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> o.<span class="me1">responseText</span><span class="br0">&#41;</span><span class="sy0">;</span>
                <span class="br0">&#125;</span><span class="sy0">,</span>
&nbsp;
                failure<span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">&#40;</span>id<span class="sy0">,</span> o<span class="sy0">,</span> args<span class="br0">&#41;</span> <span class="br0">&#123;</span>
                    <span class="co1">// Fallback...</span>
                <span class="br0">&#125;</span>
            <span class="br0">&#125;</span>
        <span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
    Y.<span class="me1">io</span><span class="br0">&#40;</span>url<span class="sy0">,</span> cfg<span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div><textarea id="syntax-28a8463b7bafce2e8dac7d46d1e85c7e-plain">function loadSection(section) {

    var url = section + '.php',
        cfg = {
            on: {
                success: function (id, o, args) {
                    Y.one('#bd').set('innerHTML', o.responseText);
                },

                failure: function (id, o, args) {
                    // Fallback...
                }
            }
        };

    Y.io(url, cfg);
}</textarea></div>
<h3>Design your application</h3>

<p>
  In our simple example, we have only one module, represented by the navigation bar. We will refer to this module using
  the identifier "navbar". The state of the navigation module will be represented using the name of the corresponding
  section ("home", "overview", "products", etc.)
</p>

<h3>Retrieve the initial state of the navigation module</h3>

<p>
  Use the <code>getBookmarkedState</code> method to find out the initial state of a module according
  to the URL fragment identifier (which is present if the user had previously bookmarked the application).
  In our example, we also use the <code>QueryString.parse</code> method to find out the initial state
  of a module according to the query string (which is present if the user reached the page using a search engine,
  or if the user did not have scripting enabled when previously bookmarking the page). Finally, default to "home":
</p>

<div id="syntax-927fd11bdd41dbda6cce9da3e5287fe8" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">bookmarkedSection <span class="sy0">=</span> Y.<span class="me1">History</span>.<span class="me1">getBookmarkedState</span><span class="br0">&#40;</span><span class="st0">'navbar'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">querySection <span class="sy0">=</span> Y.<span class="me1">QueryString</span>.<span class="me1">parse</span><span class="br0">&#40;</span>el.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'href'</span><span class="br0">&#41;</span>.<span class="me1">split</span><span class="br0">&#40;</span><span class="st0">'?'</span><span class="br0">&#41;</span><span class="br0">&#91;</span><span class="nu0">1</span><span class="br0">&#93;</span><span class="br0">&#41;</span>.<span class="me1">section</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">initSection <span class="sy0">=</span> bookmarkedSection <span class="sy0">||</span> querySection <span class="sy0">||</span> <span class="st0">'home'</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">bookmarkedSection <span class="sy0">=</span> Y.<span class="me1">History</span>.<span class="me1">getBookmarkedState</span><span class="br0">&#40;</span><span class="st0">'navbar'</span><span class="br0">&#41;</span><span class="sy0">;</span>
querySection <span class="sy0">=</span> Y.<span class="me1">QueryString</span>.<span class="me1">parse</span><span class="br0">&#40;</span>el.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'href'</span><span class="br0">&#41;</span>.<span class="me1">split</span><span class="br0">&#40;</span><span class="st0">'?'</span><span class="br0">&#41;</span><span class="br0">&#91;</span><span class="nu0">1</span><span class="br0">&#93;</span><span class="br0">&#41;</span>.<span class="me1">section</span><span class="sy0">;</span>
initSection <span class="sy0">=</span> bookmarkedSection <span class="sy0">||</span> querySection <span class="sy0">||</span> <span class="st0">'home'</span><span class="sy0">;</span></pre></div><textarea id="syntax-927fd11bdd41dbda6cce9da3e5287fe8-plain">bookmarkedSection = Y.History.getBookmarkedState('navbar');
querySection = Y.QueryString.parse(el.get('href').split('?')[1]).section;
initSection = bookmarkedSection || querySection || 'home';</textarea></div>
<h3>Register the navigation module</h3>

<p>
  Use the <code>register</code> method, passing in the navigation module identifier, the initial state
  of the navigation module, and the callback function that will be called when the state of the navigation
  module has changed:
</p>

<div id="syntax-461f04f1914f01fba4301b89697569ec" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">Y.<span class="me1">History</span>.<span class="me1">register</span><span class="br0">&#40;</span><span class="st0">'navbar'</span><span class="sy0">,</span> initSection<span class="br0">&#41;</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'history:moduleStateChange'</span><span class="sy0">,</span> loadSection<span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">Y.<span class="me1">History</span>.<span class="me1">register</span><span class="br0">&#40;</span><span class="st0">'navbar'</span><span class="sy0">,</span> initSection<span class="br0">&#41;</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'history:moduleStateChange'</span><span class="sy0">,</span> loadSection<span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-461f04f1914f01fba4301b89697569ec-plain">Y.History.register('navbar', initSection).on('history:moduleStateChange', loadSection);</textarea></div>
<h3>Write the code that initializes your application</h3>

<p>
  First of all, we want to change the behavior of the links in the navigation bar. In order to do this, we simply
  enumerate them, and attach to each individual anchor an <code>onclick</code> handler. In the <code>onclick</code>
  handler, we cancel the event's default behavior and do some custom action.
</p>

<p>
  We also need to display the default section if a section was requested via the URL fragment identifier,
  and that section is different from the one loaded using PHP:
</p>

<div id="syntax-752c5f66c5155d774e7b38d94a47af20" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">function</span> initializeNavigationBar<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>evt<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> el <span class="sy0">=</span> evt.<span class="me1">target</span><span class="sy0">,</span> action<span class="sy0">,</span> section<span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="kw1">while</span> <span class="br0">&#40;</span>el.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'id'</span><span class="br0">&#41;</span> <span class="sy0">!==</span> <span class="st0">'nav'</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">            <span class="kw1">if</span> <span class="br0">&#40;</span>el.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'nodeName'</span><span class="br0">&#41;</span>.<span class="me1">toUpperCase</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">===</span> <span class="st0">'A'</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                evt.<span class="me1">preventDefault</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                action <span class="sy0">=</span> Y.<span class="me1">QueryString</span>.<span class="me1">parse</span><span class="br0">&#40;</span>el.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'href'</span><span class="br0">&#41;</span>.<span class="me1">split</span><span class="br0">&#40;</span><span class="st0">'?'</span><span class="br0">&#41;</span><span class="br0">&#91;</span><span class="nu0">1</span><span class="br0">&#93;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                section <span class="sy0">=</span>  action.<span class="me1">section</span> <span class="sy0">||</span> <span class="st0">'home'</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span>Y.<span class="me1">History</span>.<span class="kw3">navigate</span><span class="br0">&#40;</span><span class="st0">'navbar'</span><span class="sy0">,</span> section<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">                    <span class="co1">// Fallback...</span></div></li><li class="li1"><div class="de1">                    loadSection<span class="br0">&#40;</span>section<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">                <span class="kw1">break</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">            <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">                el <span class="sy0">=</span> el.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'parentNode'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">            <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">,</span> <span class="st0">'#nav'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    currentSection <span class="sy0">=</span> Y.<span class="me1">History</span>.<span class="me1">getCurrentState</span><span class="br0">&#40;</span><span class="st0">'navbar'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    loadSection<span class="br0">&#40;</span>currentSection<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">function</span> initializeNavigationBar<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'click'</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">&#40;</span>evt<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> el <span class="sy0">=</span> evt.<span class="me1">target</span><span class="sy0">,</span> action<span class="sy0">,</span> section<span class="sy0">;</span>
        <span class="kw1">while</span> <span class="br0">&#40;</span>el.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'id'</span><span class="br0">&#41;</span> <span class="sy0">!==</span> <span class="st0">'nav'</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
            <span class="kw1">if</span> <span class="br0">&#40;</span>el.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'nodeName'</span><span class="br0">&#41;</span>.<span class="me1">toUpperCase</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="sy0">===</span> <span class="st0">'A'</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                evt.<span class="me1">preventDefault</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
                action <span class="sy0">=</span> Y.<span class="me1">QueryString</span>.<span class="me1">parse</span><span class="br0">&#40;</span>el.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'href'</span><span class="br0">&#41;</span>.<span class="me1">split</span><span class="br0">&#40;</span><span class="st0">'?'</span><span class="br0">&#41;</span><span class="br0">&#91;</span><span class="nu0">1</span><span class="br0">&#93;</span><span class="br0">&#41;</span><span class="sy0">;</span>
                section <span class="sy0">=</span>  action.<span class="me1">section</span> <span class="sy0">||</span> <span class="st0">'home'</span><span class="sy0">;</span>
                <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span>Y.<span class="me1">History</span>.<span class="kw3">navigate</span><span class="br0">&#40;</span><span class="st0">'navbar'</span><span class="sy0">,</span> section<span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                    <span class="co1">// Fallback...</span>
                    loadSection<span class="br0">&#40;</span>section<span class="br0">&#41;</span><span class="sy0">;</span>
                <span class="br0">&#125;</span>
                <span class="kw1">break</span><span class="sy0">;</span>
            <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span>
                el <span class="sy0">=</span> el.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">'parentNode'</span><span class="br0">&#41;</span><span class="sy0">;</span>
            <span class="br0">&#125;</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span><span class="sy0">,</span> <span class="st0">'#nav'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    currentSection <span class="sy0">=</span> Y.<span class="me1">History</span>.<span class="me1">getCurrentState</span><span class="br0">&#40;</span><span class="st0">'navbar'</span><span class="br0">&#41;</span><span class="sy0">;</span>
    loadSection<span class="br0">&#40;</span>currentSection<span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div><textarea id="syntax-752c5f66c5155d774e7b38d94a47af20-plain">function initializeNavigationBar() {
    Y.on('click', function (evt) {
        var el = evt.target, action, section;
        while (el.get('id') !== 'nav') {
            if (el.get('nodeName').toUpperCase() === 'A') {
                evt.preventDefault();
                action = Y.QueryString.parse(el.get('href').split('?')[1]);
                section =  action.section || 'home';
                if (!Y.History.navigate('navbar', section)) {
                    // Fallback...
                    loadSection(section);
                }
                break;
            } else {
                el = el.get('parentNode');
            }
        }
    }, '#nav');

    currentSection = Y.History.getCurrentState('navbar');
    loadSection(currentSection);
}</textarea></div>
<h3>Initialize the Browser History Utility</h3>

<div id="syntax-cf0a02db26e88739505eeb6793a5e553" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">Y.<span class="me1">History</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'history:ready'</span><span class="sy0">,</span> initializeNavigationBar<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">History</span>.<span class="me1">initialize</span><span class="br0">&#40;</span><span class="st0">'#yui-history-field'</span><span class="sy0">,</span> <span class="st0">'#yui-history-iframe'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">Y.<span class="me1">History</span>.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'history:ready'</span><span class="sy0">,</span> initializeNavigationBar<span class="br0">&#41;</span><span class="sy0">;</span>
Y.<span class="me1">History</span>.<span class="me1">initialize</span><span class="br0">&#40;</span><span class="st0">'#yui-history-field'</span><span class="sy0">,</span> <span class="st0">'#yui-history-iframe'</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-cf0a02db26e88739505eeb6793a5e553-plain">Y.History.on('history:ready', initializeNavigationBar);
Y.History.initialize('#yui-history-field', '#yui-history-iframe');</textarea></div>				</div>
				<div class="yui-u sidebar">
					
				
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    Browser History Utility Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li class='selected'><a href='../history/history-navbar.html'>Simple Navigation Bar</a></li>							</ul>
						</div>
					</div>
					
					<div class="mod box4">
                        <div class="hd">
						<h4>More Browser History Utility Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/history/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_history.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>
		
		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="selected "><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Tabview - Functional Examples" href="../../examples/tabview/index.html">Tabview <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2010 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = {filter:"debug", logInclude: {history:true, yui:true}};
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
